<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转按钮</title>
    <style type="text/css">
        ul li {
            float: left;
           margin: 10px;
            list-style: none;
			font-size: 30px;
			color: red;
        }
        #box img {
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
        }
        #box img:hover {
            -moz-transform: rotate(360deg) scale(1.5);
            -webkit-transform: rotate(360deg) scale(1.5);
            -o-transform: rotate(360deg) scale(1.5);
            -ms-transform: rotate(360deg) scale(1.5);
            transform: rotate(360deg) scale(1.5);
        }
    </style>
</head>
<body>
<h2>顺时针旋转360度放大1.2倍</h2>
<ul id="box">
    <li><a href="#"><img src="images/rss.png" /></a>wifi</li>/
    <li><a href="#"><img src="images/delicious.png"/></a>宝马</li>
    <li><a href="#"><img src="images/facebook.png" /></a>动态</li>
    <li><a href="#"><img src="images/twitter.png"/></a>得劲</li>
    <li><a href="#"><img src="images/yahoo.png" /></a>完美</li>
</ul>
</body>
</html>